{% extends 'base.html'%}
{%block title%}test{%endblock%}
{%block content%}

<div class="ui container detail-container animated fadeInLeft" >
    <input type="hidden" name="" id='question_id' value="{{q.id}}">
    <div class="q-header">
        <h3 class="ui header">
            <i class="help circle outline icon"></i>
            <div class="content">
                {{q.title}}
            </div>
            
        </h3>
        <div class="meta">
            <a class="ui mini label">javascript</a>
            <a href='#' class="ui user">桃源居小磊</a>
            <span class='stay'>{{moment(q.createTime).fromNow()}}</span>
        </div>
    </div>
    <div class="ui qa-actions">
        <div class="action">
            <button class="ui mini green button">关注</button>
            <span class="statistic"><strong>2</strong>关注</span>
        </div>
        <div class="action">
            <button class="ui mini  button">收藏</button>
            <span class="statistic"><strong>0</strong>收藏,<strong>10</strong>浏览</span>
        </div>
    </div>
</div>
<div class="ui container c-container ">
        <div class="qa-content">
            <div class="ui item">
                <!--<div class="ui post-col">
                    <span>asdf</span>
                    <span>asss</span>
                </div>-->
                <div class="content animated fadeInLeft">
                    <div class="description">
                        {{q.descriptions}}
                    </div>
                    
                    <div class="meta">
                        <span class="price">{{moment(q.createTime).fromNow()}}</span>
                    </div>
                </div>
            </div>
            {%raw%}
            <div id="app" v-cloak>
                <div class="ui header animated fadeInLeft" style="margin-top:40px;margin-bottom:-20px;">
                    {{total}}个回答
                    <div class="ui divider" style='border-top:2px solid rgba(34,36,38,.15);'></div>
                </div>
                
                <div class="ui divided items " >
                    <div class="item animated fadeInLeft" v-cloak v-for='item in answers'>
                        <!--<div class="ui post-col">
                            <span>asdf</span>
                            <span>asss</span>
                        </div>-->
                        <div class="content">
                            <div class="description">
                                {{item.content}}
                            </div>
                            
                            <div class="meta">
                                <span class="price">{{item.createTime}}</span>
                                <span class="price">{{item.user.name}}</span>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            {%endraw%}
            
            <div class="ui answer animated fadeInLeft">
                <textarea rows="5" name='content' placeholder="这里输入内容，支持Markdown语法."></textarea>
                <div class="submit" style='margin-top:20px;text-align: right;'>
                    <button class="ui green button">提交</button>
                </div>
            </div>
            
        </div>
    
    <div class="qa-mate">
         <span >相似问题</span>
    </div>
</div>

<style type="text/css">
    @import "/static/edit/stylesheets/vendor/font.css";
    @import "/static/edit/stylesheets/vendor/markdown.css";
    @import "/static/edit/stylesheets/emoji/nature.css";
    @import "/static/edit/stylesheets/emoji/object.css";
    @import "/static/edit/stylesheets/emoji/people.css";
    @import "/static/edit/stylesheets/emoji/place.css";
    @import "/static/edit/stylesheets/emoji/Sysmbols.css";
    @import "/static/edit/stylesheets/emoji/twemoji.css";
    @import "/static/edit/stylesheets/vendor/font-awesome.css";
    @import "/static/edit/stylesheets/vendor/sunburst.css";
</style>

{% endblock%}
{% block script %}
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/underscore/underscore-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/jquery/jquery-2.1.3.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/highlight/highlight.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/markdown/he.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/markdown/marked.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/markdown/to-markdown.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/markdown/jsHtmlToText.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/markdown/tab.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/markdown/config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/markdown/emoji.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/edit/javascripts/vendor/markdown/bootstrap-markdown.js"></script>
    <script type="text/javascript" charset="utf-8"src="/static/edit/javascripts/vendor/markdown/locale/bootstrap-markdown.zh.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.18.1/locale/zh-cn.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.min.js"></script>
    <script>
        $("textarea").markdown({
            language: 'zh',
            fullscreen: {
                enable: true
            },
            resize: 'vertical',
            localStorage: 'md',
            imgurl: '/c/imgUpload',
            base64url: '/c/imgUpload'
        });
        setTimeout(function(){
            $('.ui.answer').removeClass('animated')
            $('.ui.answer').removeClass('fadeInLeft')
        },1000)
        // $('.ui.answer').removeClass('animated')
        
        var app = new Vue({
            el: '#app',
            data:{
                answers:[],
                total:0,
            },
            mounted:function(){
                this.getAnswers();
            },
            methods:{
                getAnswers:function(){
                    question_id = $('#question_id').val()
                    var _self = this;
                    $.ajax({
                        type: 'GET',
                        url:'/answers_by_question/'+ question_id,
                        dataType:"json",
                        success: function(data){
                            if(data=={}){
                                _self.total = 0
                            }
                            for(var i=0; i<data.length;i++){
                                data[i].createTime = moment(data[i].createTime).add(-8,'hours').endOf('second').fromNow()
                            }
                            _self.answers = data
                        }
                    })
                }
            }
        })
    </script>

{% endblock %}